<template>
  <div>
    <MyNavcomponent title="用户注册" />
    <van-form>
      <van-field v-model="loginName" label="账号" />
      <van-field v-model="password" type="password" label="密码" />
      <van-field v-model="userName" label="昵称" />
      <van-field v-model="phonenumber" type="tel" label="手机号" />
      <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="info" @click="getCodes">发送验证码</van-button>
          <!--  @click="getCodes" -->
        </template>
      </van-field>
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="remark"
        rows="1"
        autosize
        label="个人简介"
        type="textarea"
        placeholder="输入你的自我介绍吧"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="doSubmit">注册</van-button>
        <!-- @click="doSubmit" -->
      </div>
    </van-form>

    <!-- <h2>我是注册页面啊</h2> -->
  </div>
</template>
<script>
import { Toast } from 'vant';
import MyNavcomponent from "../components/personal/MyNavcomponent";
import { getCode } from "../api/shop-api/shop-api.js";
import { getRegistry } from "../api/shop-api/shop-api.js";
export default {
  name: "Registry",
  data() {
    return {
      phonenumber: "",
      code: "",
      loginName: "",
      password: "",
      userName: "",
      radio: "0",
      remark: ""
    };
  },
  created() {
    // console.log(this.phonenumber);
  },
  methods: {
    // getCode().then().catch()
    getCodes() {
      getCode(this.phonenumber)
        .then(res => {
          if(res.msg=='操作成功'){
            Toast('注册成功，请前往登录')
          }
          console.log(res);
        })
        .catch();
    },

    doSubmit(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append("loginName", this.loginName);
      formData.append("password", this.password);
      formData.append("userName", this.userName);
      formData.append("phonenumber", this.phonenumber);
      formData.append("code", this.code);
      formData.append("radio", this.radio);
      formData.append("remark", this.remark);

      getRegistry(formData)
        .then(res => {
          console.log(res);
        })
        .catch();
    }
  },
  components: {
    MyNavcomponent
  }
};
</script>
<style scoped>
</style>